<template>
	<el-input :clearable="configure.clearable" v-model.trim="inputVal" :minlength="configure.minlength || 500"
		:rows="configure.rows" :maxlength="configure.maxlength || 500"
		:show-word-limit="configure?.showWordLimit == undefined ? true : configure?.showWordLimit" type="textarea"
		:placeholder="configure.placeholder" @change="handleChange" :disabled="configure.disabled" />
</template>
<script setup lang="ts">
import { PropType, ref, watch } from "vue";
import { PyTextAreaType } from "./type";
const props = defineProps({
	//双向绑定的值
	modelValue: {
		type: String,
		required: false,
		default: "",
	},
	configure: {
		type: Object as PropType<PyTextAreaType>,
		default: {
			disabled: false,
		},
	},
});

const inputVal = ref(props.modelValue || "");
watch(
	() => props.modelValue,
	val => {
		inputVal.value = val || "";
	},
	{ deep: true }
);
const emits = defineEmits(["update:modelValue", "onChange"]);

//change事件
const handleChange = () => {
	emits("onChange", inputVal.value);
	emits("update:modelValue", inputVal.value);
};
</script>
